<template>
  <div class="login-page w-100 h-100">
    <div class="position-absolute top-0 left-0 w-100 h-100 overflow-hidden flex-center-center">
      <img class="animate__animated animate__rubberBand" src="@img/login/01.jpg" alt="" />
    </div>
    <div class="position-absolute top-0 left-0 w-100 h-100 overflow-hidden flex-center-center">
      <img class="animate__animated animate__lightSpeedInRight animate__delay-2s" src="@img/login/02.jpg" alt="" />
      <div @click="show = true" class="start-button animate__animated animate__bounceIn animate__delay-4s">开始吧</div>
    </div>
    <div v-if="show" class="position-absolute top-0 left-0 w-100 h-100 overflow-hidden flex-center-center">
      <img src="@img/login/03.jpg" alt="" />
      <div class="w-100 h-100 login-wrapper flex-center-center">
        <div>
          <div class="text-bold d-flex align-items-center justify-content-center text-max mb-5">
            <div :class="{ inactive: active !== 1 }" @click="active = 1">登录</div>
            <div class="ml-4" :class="{ inactive: active !== 2 }" @click="active = 2">注册</div>
          </div>
          <div>
            <div class="mb-3">
              <div class="text-main mb-2 pl-3">请输入手机号码</div>
              <el-input v-model="form.phone" />
            </div>
            <div class="mb-3">
              <div class="text-main mb-2 pl-3">密码</div>
              <el-input v-model="form.password" type="password" show-password />
            </div>
            <div class="mt-5">
              <el-button type="warning" @click="onSubmit">{{ active === 1 ? '登录' : '注册' }}</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { ElInput, ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import { useLocalStorage } from '@vueuse/core';

const router = useRouter();
const loginInfo = useLocalStorage('loginInfo', {});

const show = ref(false);
const active = ref(1);
const form = reactive({
  phone: '',
  password: ''
});
const phoneReg = /^1[3456789]\d{9}$/;

const onSubmit = () => {
  const { phone, password } = form;
  if (!phone) return ElMessage.error('请填写手机号码');
  if (!phoneReg.test(phone)) return ElMessage.error('请填写正确的手机号码');
  if (!password) return ElMessage.error('请填写密码');

  if (active.value === 2) {
    if (loginInfo.value[phone]) return ElMessage.error('该账号已注册，请前往登录');
    ElMessage.success('注册成功，请前往登录');
    loginInfo.value[phone] = password;
    active.value = 1;
  } else {
    if (!loginInfo.value[phone]) return ElMessage.error('该账号未注册');
    if (loginInfo.value[phone] !== password) return ElMessage.error('密码错误');
    ElMessage.success('登录成功');
    router.push('/publish');
  }
};
</script>

<style lang="less" scoped>
@import '~@style/variable.less';

.login-page {
  background-color: @bg3;
  img {
    width: auto;
    height: 100%;
  }

  .start-button {
    position: absolute;
    top: 70%;
    left: 5rem;
    padding: 0 2rem;
    height: 4rem;
    border-radius: 4rem;
    font-size: 2.5rem;
    border: 0.2rem solid @gray;
    color: @gray;
    background: @white;
  }

  .inactive {
    opacity: 0.3;
  }

  .login-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    :deep(.el-input) {
      width: 20rem;
      height: 4rem;
      line-height: 4rem;
      border-radius: 4rem;
      .el-input__wrapper {
        border-radius: 4rem;
        background-color: rgba(195, 170, 154, 0.5);
        border: 0.3rem solid transparent;
        box-shadow: none;
        padding: 0rem 1rem;
        &:focus,
        &.is-focus {
          border: 0.3rem solid @active;
        }
        .el-input__inner {
          font-size: 1.2rem;
          color: @black;
          height: 4rem;
        }
        .el-icon {
          font-size: 1.6rem;
          color: @black;
        }
      }
    }

    :deep(.el-button) {
      width: 20rem;
      height: 4rem;
      border-radius: 4rem;
      font-size: 1.4rem;
      letter-spacing: 0.2rem;
      box-shadow: 0 0.2rem 0 #de8e38;
    }
  }
}
</style>
